<template>
  <div class="operate">
    <el-button type="primary" @click="onAdd">新增</el-button>
  </div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
        v-for="item in tableColumn"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        show-overflow-tooltip
    >
      <template #default="scope">
        <span v-if="item.prop === 'type'">{{ getLabel(scope.row[item.prop], typeOption) }}</span>
        <span v-else-if="item.prop === 'platform'">{{ getLabel(scope.row[item.prop], platformOption) }}</span>
        <span v-else-if="item.prop === 'minPoint'">{{ getLabel(scope.row[item.prop], minPointOption) }}</span>
        <span v-else-if="item.prop === 'useType'">{{ getLabel(scope.row[item.prop], useTypeOption) }}</span>
        <span v-else-if="item.prop === 'memberLevel'">{{ getLabel(scope.row[item.prop], memberLevelOption) }}</span>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="150">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="onShow(scope.row)">查看</el-button>
        <el-button link type="primary" size="small" @click="onEdit(scope.row)">编辑</el-button>
        <el-button link type="primary" size="small" @click="onDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
        v-model:current-page="current"
        v-model:page-size="size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="fetchData"
        @current-change="fetchData"
    />
  </div>
  <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="800px"
      @close="onClose(formRef)"
  >
    <el-descriptions v-if="showData" :column="1">
      <el-descriptions-item v-for="item in tableColumn" :key="item.prop" :label="item.label">
        <span v-if="item.prop === 'type'">{{ getLabel(form[item.prop], typeOption) }}</span>
        <span v-else-if="item.prop === 'platform'">{{ getLabel(form[item.prop], platformOption) }}</span>
        <span v-else-if="item.prop === 'minPoint'">{{ getLabel(form[item.prop], minPointOption) }}</span>
        <span v-else-if="item.prop === 'useType'">{{ getLabel(form[item.prop], useTypeOption) }}</span>
        <span v-else-if="item.prop === 'memberLevel'">{{ getLabel(form[item.prop], memberLevelOption) }}</span>
        <span v-else>{{ form[item.prop] }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <el-form
        v-else
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="140px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item label="优惠券类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择">
          <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="优惠券名称" prop="name">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="使用平台" prop="platform">
        <el-select v-model="form.platform" placeholder="请选择">
          <el-option v-for="item in platformOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="数量" prop="count">
        <el-input-number v-model="form.count" :min="1" />
      </el-form-item>
      <el-form-item label="金额" prop="amount">
        <el-input-number v-model="form.amount" :min="0" :precision="2" />
      </el-form-item>
      <el-form-item label="每人限领张数" prop="perLimit">
        <el-input-number v-model="form.perLimit" :min="1" />
      </el-form-item>
      <el-form-item label="使用门槛" prop="minPoint">
        <el-select v-model="form.minPoint" placeholder="请选择">
          <el-option v-for="item in minPointOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="form.startTime" type="datetime" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="form.endTime" type="datetime" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="使用类型" prop="useType">
        <el-select v-model="form.useType" placeholder="请选择">
          <el-option v-for="item in useTypeOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="可以领取的日期" prop="enableTime">
        <el-date-picker v-model="form.enableTime" type="datetime" placeholder="请选择" />
      </el-form-item>
      <el-form-item label="优惠码" prop="code">
        <el-input v-model="form.code"/>
      </el-form-item>
      <el-form-item label="可领取的会员类型" prop="memberLevel">
        <el-select v-model="form.memberLevel" placeholder="请选择">
          <el-option v-for="item in memberLevelOption" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="note">
        <el-input v-model="form.note" type="textarea" :rows="6" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span v-if="!showData" class="dialog-footer">
        <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue"
import { ElNotification, ElMessageBox } from 'element-plus'
import {smsCouponPage,smsCouponAdd,smsCouponEdit,smsCouponDelId,smsCouponOne} from "../../http/sms_coupon.js"


const showData = ref(false)
const dialogVisible = ref(false)
const title = ref('')
const current = ref(1)
const size = ref(10)
const total = ref(0)
const tableData = ref([])
const form = ref({
  id: '',
  type: '',
  name: '',
  platform: '',
  count: 1,
  amount: 0.00,
  perLimit: 1,
  minPoint: '',
  startTime: '',
  endTime: '',
  useType: '',
  enableTime: '',
  code: '',
  memberLevel: '',
  note: ''
})
const formRef = ref()
const rules = ref({
  name: [
    {required: true, message: '请输入优惠券名称', trigger: ['blur']}
  ],
  type: [
    {required: true, message: '请选择优惠券类型', trigger: ['blur']}
  ],
  platform: [
    {required: true, message: '请选择使用平台', trigger: ['blur']}
  ],
  minPoint: [
    {required: true, message: '请选择使用门槛', trigger: ['blur']}
  ],
  startTime: [
    {required: true, message: '请选择开始时间', trigger: ['blur']}
  ],
  endTime: [
    {required: true, message: '请选择结束时间', trigger: ['blur']}
  ],
  useType: [
    {required: true, message: '请选择使用类型', trigger: ['blur']}
  ],
  enableTime: [
    {required: true, message: '请选择可以领取的日期', trigger: ['blur']}
  ],
  code: [
    {required: true, message: '请输入优惠码', trigger: ['blur']}
  ],
  memberLevel: [
    {required: true, message: '请选择可领取的会员类型', trigger: ['blur']}
  ]
})
const tableColumn = [
  {
    label: '编号',
    prop: 'id',
    width: 60
  },
  {
    label: '优惠券名称',
    prop: 'name',
    width: 120
  },
  {
    label: '优惠券类型',
    prop: 'type',
    width: 120
  },
  {
    label: '使用平台',
    prop: 'platform',
    width: 120
  },
  {
    label: '数量',
    prop: 'count',
    width: 100
  },
  {
    label: '金额',
    prop: 'amount',
    width: 120
  },
  {
    label: '每人限领张数',
    prop: 'perLimit',
    width: 120
  },
  {
    label: '使用门槛',
    prop: 'minPoint',
    width: 120
  },
  {
    label: '开始时间',
    prop: 'startTime',
    width: 120
  },
  {
    label: '结束时间',
    prop: 'endTime',
    width: 120
  },
  {
    label: '使用类型',
    prop: 'useType',
    width: 120
  },
  {
    label: '发行数量',
    prop: 'publishCount',
    width: 120
  },
  {
    label: '已使用数量',
    prop: 'useCount',
    width: 120
  },
  {
    label: '领取数量',
    prop: 'receiveCount',
    width: 120
  },
  {
    label: '可领取日期',
    prop: 'enableTime',
    width: 120
  },
  {
    label: '优惠码',
    prop: 'code',
    width: 120
  },
  {
    label: '可以领取的日期',
    prop: 'startTime',
    width: 150
  },
  {
    label: '可领取的会员类型',
    prop: 'memberLevel',
    width: 150
  },
  {
    label: '备注',
    prop: 'note',
    width: 120
  }
]
const typeOption = [
  {
    label: '全场赠券',
    value: 0
  },
  {
    label: '会员赠券',
    value: 1
  },
  {
    label: '购物赠券',
    value: 2
  },
  {
    label: '注册赠券',
    value: 3
  }
]
const platformOption = [
  {
    label: '全部',
    value: 0
  },
  {
    label: '移动',
    value: 1
  },
  {
    label: 'PC',
    value: 2
  }
]
const useTypeOption = [
  {
    label: '指定分类',
    value: 1
  },
  {
    label: '指定商品',
    value: 2
  }
]
const minPointOption = [
  {
    label: '无门槛',
    value: 0
  },
]
const memberLevelOption = [
  {
    label: '无门槛',
    value: 0
  },
]

onMounted(() => {
  fetchData()
})

// 加载列表
const fetchData = async () => {
  const response = await smsCouponPage({
    current: current.value,
    size: size.value
  })
  if (response) {
    tableData.value = response.data.page.records || []
    total.value = response.data.page.total
  }
}

// 根据值获取文本
const getLabel = (value, options) => {
  const result = options.filter(item => {
    return item.value == value
  })
  return result.length > 0 ? result[0]['label'] : ''
}

// 关闭弹框
const onClose = (formEl) => {
  form.value = {
    id: '',
    type: '',
    name: '',
    platform: '',
    count: 1,
    amount: 0.00,
    perLimit: 1,
    minPoint: '',
    startTime: '',
    endTime: '',
    useType: '',
    enableTime: '',
    code: '',
    memberLevel: '',
    note: ''
  }

  // fetchData()
}

// 新增优惠券
const onAdd = () => {
  title.value = '新增优惠券'
  showData.value = false
  dialogVisible.value = true
}

// 查看优惠券详情
const onShow = async (row) => {
  title.value = '查看优惠券'
  const response = await smsCouponOne(row.id)
  if (response) {
    form.value = response.data.help
    showData.value = true
    dialogVisible.value = true
  }
}

// 编辑优惠券
const onEdit = async (row) => {
  title.value = '编辑优惠券'
  const response = await smsCouponOne(row.id)
  if (response) {
    form.value = response.data.help
    showData.value = false
    dialogVisible.value = true
  }
}

// 删除优惠券
const onDelete = (row) => {
  ElMessageBox.confirm(
      '是否要删除优惠券?',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
  .then(async () => {
    const response = await smsCouponDelId(row.id)
    if (response) {
      ElNotification({
        title: 'Success',
        message: '删除成功',
        type: 'success',
      })
      await fetchData()
    }
  })
}

// 提交
const onSubmit = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (form.value.id) {
        const response = await smsCouponEdit(form.value)
        if (response) {
          ElNotification({
            title: 'Success',
            message: '编辑成功',
            type: 'success',
          })
          formEl.resetFields()
          dialogVisible.value = false
          await fetchData()
        }
      } else {
        const response = await smsCouponAdd(form.value)
        if (response) {
          ElNotification({
            title: 'Success',
            message: '新增成功',
            type: 'success',
          })
          formEl.resetFields()
          dialogVisible.value = false
          await fetchData()
        }
      }
      showData.value = false
    }
  })
}

</script>

<style>
.operate {
  margin-bottom: 10px;
}

.page {
  margin-top: 10px;
}
</style>
